<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/admin/teacherMgt' }">教师管理</el-breadcrumb-item>
                <el-breadcrumb-item>添加教师</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="add-class-form">
                <el-form ref="form" :model="form" :rules="rules"  label-width="100px">
                    <el-form-item label="姓名 :" prop="teacherName">
                        <el-input type="text" v-model="form.teacherName" style="width: 50%;"></el-input>
                    </el-form-item>
                    <el-form-item label="性别 :">
                        <el-radio-group v-model="form.gender">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="联系方式 :">
                        <el-input  v-model="form.contactWay" style="width: 50%;"></el-input>
                    </el-form-item>
                    <el-form-item label="工号 :" prop="jobNumber">
                        <el-input type="text" v-model="form.jobNumber" style="width: 50%;"></el-input>
                    </el-form-item>
                    <el-form-item label="密码 :" prop="passWord">
                        <el-input type="password" v-model="form.passWord" style="width: 50%;" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码 :"  prop="checkPass">
                        <el-input type="password" v-model="form.checkPass" style="width: 50%;" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="保留天数 :" prop="day">
                        <el-input type="text" @keyup.native="dayFn" style="width: 50%;" v-model="form.day" maxlength="3" ></el-input>
                    </el-form-item>
                    <el-form-item style="float:left;">
                        <el-button type="primary" @click="submitForm('form')">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {isvalidPhone} from './../../api/validate.js'
    export default {
        data () {
            //手机号验证
            var validPhone = (rule, value,callback)=>{
                if (!value){
                    callback(new Error('请输入电话号码'))
                }else  if (!isvalidPhone(value)){
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback()
                }
            }
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    if (this.form.checkPass !== '') {
                        this.$refs.form.validateField('checkPass')
                    }
                        callback()
                    }
                }
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				} else if (value !== this.form.passWord) {
					callback(new Error('两次输入密码不一致!'))
				} else {
					callback()
				}
            }
            return {
                form: {
                    teacherName: '',
                    gender: 1,
                    contactWay: '',
                    jobNumber: '',
                    passWord: '',
                    checkPass: '',
                    day: ''
                },
                //表单验证
				rules: {
                    teacherName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    contactWay: [
                        { required: true, validator: validPhone, trigger: 'blur' }
                    ],
                    jobNumber: [
                        { required: true, message: '请输入工号', trigger: 'blur' }
                    ],
                    passWord: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
						{ required: true, validator: validatePass, trigger: 'blur' }
					],
					checkPass: [
                        { required: true, message: '请确认密码', trigger: 'blur' },
						{ required: true, validator: validatePass2, trigger: 'blur' }
                    ],
                    day: [
                        { required: true, message: '请输入保留天数', trigger: 'blur' },
                    ]
                },
            }
        },
        methods: {
            dayFn(){
                this.form.day = this.form.day.replace(/^[0-9]{4}/g,'')
            },
            submitForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/specialmanager/specialAddTeacher',{
                            userName: self.form.teacherName,
                            userSex: self.form.gender == 1 ? 'm' : 'f',
                            telephone: self.form.contactWay,
                            userNumber: self.form.jobNumber,
                            password: self.form.passWord,
                           // delMark: self.form.day
                           preserveDays: self.form.day
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '添加成功',
                                    type: 'success'
                                })
                                self.$refs[formName].resetFields()
                                self.$router.push({
                                    path:'/admin/classMgtChild',
                                })
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        }
    }
</script>


